<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <transition name="fade">
        <div v-if="showModal" class="modal-overlay">
            <div class="modal-container relative">
                <button @click="showModal = false" class="absolute top-4 right-4 text-gray-300 hover:text-white">
                    <i class="fa fa-times text-xl"></i>
                </button>

                <div class="ennea-bg"></div>
                <div class="md:flex">
                    <!-- 左侧 - 九型人格信息 -->
                    <div class="hidden md:block md:w-1/2 bg-gradient-to-br from-gray-900 to-gray-800 p-8">
                        <div class="flex flex-col h-full justify-between">
                            <div>
                                <h1 class="text-3xl font-bold mb-2 glow-text">九型人格测试系统</h1>
                                <p class="text-gray-300 mb-6">发现你真实的人格原型</p>

                                <div class="mb-8">
                                    <h2 class="text-xl font-semibold mb-4 text-cyan-300">为什么要做这个测试？</h2>
                                    <ul class="space-y-3 text-gray-300">
                                        <li class="flex items-start">
                                            <i class="fa fa-brain text-cyan-300 mt-1 mr-2"></i>
                                            <span>了解你的核心动机和恐惧</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-heart text-cyan-300 mt-1 mr-2"></i>
                                            <span>改善你的人际关系和沟通</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-chart-line text-cyan-300 mt-1 mr-2"></i>
                                            <span>获得个人成长的洞察</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-users text-cyan-300 mt-1 mr-2"></i>
                                            <span>学习如何与不同人格类型互动</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
                                <h3 class="text-sm font-semibold text-cyan-300 mb-2">用户评价</h3>
                                <p class="text-gray-300 italic">"这个测试彻底改变了我对自己和他人的理解。准确性令人惊讶！"</p>
                                <p class="text-right text-gray-400 mt-2">— 张女士, 4号人格</p>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧 - 注册表单 -->
                    <div class="w-full md:w-1/2 bg-gray-800 p-8">
                        <div class="text-center mb-8 md:hidden">
                            <h1 class="text-2xl font-bold mb-1 glow-text">九型人格测试系统</h1>
                            <p class="text-gray-300 text-sm">发现你真实的人格原型</p>
                        </div>

                        <!-- 注册标签页 -->
                        <div class="flex border-b border-gray-700 mb-6">
                            <button
                                @click="activeTab = 'phone'"
                                :class="{ 'tab-active': activeTab === 'phone', 'text-gray-400': activeTab !== 'phone' }"
                                class="flex-1 py-2 font-medium"
                            >
                                手机注册
                            </button>
                            <button
                                @click="activeTab = 'email'"
                                :class="{ 'tab-active': activeTab === 'email', 'text-gray-400': activeTab !== 'email' }"
                                class="flex-1 py-2 font-medium"
                            >
                                邮箱注册
                            </button>
                        </div>

                        <!-- 手机注册表单 -->
                        <form v-if="activeTab === 'phone'" @submit.prevent="submitPhoneForm" class="space-y-4">
                            <div>
                                <label for="phoneUsername" class="block text-sm font-medium text-gray-300 mb-1">用户名</label>
                                <input
                                    v-model="phoneForm.username"
                                    @blur="validatePhoneUsername"
                                    type="text"
                                    id="phoneUsername"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="phoneErrors.username" class="text-red-400 text-xs mt-1">{{ phoneErrors.username }}</p>
                            </div>

                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">手机号码</label>
                                <input
                                    v-model="phoneForm.phone"
                                    @blur="validatePhone"
                                    type="tel"
                                    id="phone"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="phoneErrors.phone" class="text-red-400 text-xs mt-1">{{ phoneErrors.phone }}</p>
                            </div>

                            <div>
                                <label for="phonePassword" class="block text-sm font-medium text-gray-300 mb-1">密码</label>
                                <input
                                    v-model="phoneForm.password"
                                    @blur="validatePhonePassword"
                                    type="password"
                                    id="phonePassword"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="phoneErrors.password" class="text-red-400 text-xs mt-1">{{ phoneErrors.password }}</p>
                            </div>

                            <div>
                                <label for="phoneVerifyCode" class="block text-sm font-medium text-gray-300 mb-1">验证码</label>
                                <div class="flex space-x-2">
                                    <input
                                        v-model="phoneForm.verifyCode"
                                        @blur="validatePhoneCode"
                                        type="text"
                                        id="phoneVerifyCode"
                                        class="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                    />
                                    <button
                                        type="button"
                                        @click="sendPhoneCode"
                                        :disabled="phoneCountdown > 0"
                                        :class="{ 'bg-green-500 hover:bg-green-600': phoneCodeSent, 'bg-cyan-600 hover:bg-cyan-700': !phoneCodeSent }"
                                        class="px-4 py-2 text-white rounded-lg transition"
                                    >
                                        <span v-if="phoneCountdown === 0">
                                            {{ phoneCodeSent ? '已发送' : '获取验证码' }}
                                        </span>
                                        <span v-else class="countdown">{{ phoneCountdown }}秒</span>
                                    </button>
                                </div>
                                <p v-if="phoneErrors.verifyCode" class="text-red-400 text-xs mt-1">{{ phoneErrors.verifyCode }}</p>
                            </div>

                            <div class="pt-2">
                                <button
                                    type="submit"
                                    class="w-full py-3 bg-cyan-600 text-white font-medium rounded-lg btn-glow hover:bg-cyan-700 transition"
                                >
                                    手机注册
                                </button>
                            </div>
                        </form>

                        <!-- 邮箱注册表单 -->
                        <form v-if="activeTab === 'email'" @submit.prevent="submitEmailForm" class="space-y-4">
                            <div>
                                <label for="emailUsername" class="block text-sm font-medium text-gray-300 mb-1">用户名</label>
                                <input
                                    v-model="emailForm.username"
                                    @blur="validateEmailUsername"
                                    type="text"
                                    id="emailUsername"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="emailErrors.username" class="text-red-400 text-xs mt-1">{{ emailErrors.username }}</p>
                            </div>

                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-300 mb-1">邮箱地址</label>
                                <input
                                    v-model="emailForm.email"
                                    @blur="validateEmail"
                                    type="email"
                                    id="email"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="emailErrors.email" class="text-red-400 text-xs mt-1">{{ emailErrors.email }}</p>
                            </div>

                            <div>
                                <label for="emailPassword" class="block text-sm font-medium text-gray-300 mb-1">密码</label>
                                <input
                                    v-model="emailForm.password"
                                    @blur="validateEmailPassword"
                                    type="password"
                                    id="emailPassword"
                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                />
                                <p v-if="emailErrors.password" class="text-red-400 text-xs mt-1">{{ emailErrors.password }}</p>
                            </div>

                            <div>
                                <label for="emailVerifyCode" class="block text-sm font-medium text-gray-300 mb-1">验证码</label>
                                <div class="flex space-x-2">
                                    <input
                                        v-model="emailForm.verifyCode"
                                        @blur="validateEmailCode"
                                        type="text"
                                        id="emailVerifyCode"
                                        class="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg input-glow focus:outline-none focus:border-cyan-400"
                                    />
                                    <button
                                        type="button"
                                        @click="sendEmailCode"
                                        :disabled="emailCountdown > 0"
                                        :class="{ 'bg-green-500 hover:bg-green-600': emailCodeSent, 'bg-cyan-600 hover:bg-cyan-700': !emailCodeSent }"
                                        class="px-4 py-2 text-white rounded-lg transition"
                                    >
                                        <span v-if="emailCountdown === 0">
                                            {{ emailCodeSent ? '已发送' : '获取验证码' }}
                                        </span>
                                        <span v-else class="countdown">{{ emailCountdown }}秒</span>
                                    </button>
                                </div>
                                <p v-if="emailErrors.verifyCode" class="text-red-400 text-xs mt-1">{{ emailErrors.verifyCode }}</p>
                            </div>

                            <div class="pt-2">
                                <button
                                    type="submit"
                                    class="w-full py-3 bg-cyan-600 text-white font-medium rounded-lg btn-glow hover:bg-cyan-700 transition"
                                >
                                    邮箱注册
                                </button>
                            </div>
                        </form>

                        <!-- 第三方登录 -->
                        <div class="mt-8 pt-6 border-t border-gray-700">
                            <p class="text-center text-gray-400 mb-4">或使用以下方式注册</p>
                            <div class="flex justify-center space-x-4">
                                <button
                                    @click="socialLogin('wechat')"
                                    class="social-btn wechat-btn w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600"
                                >
                                    <i class="fa fa-weixin text-xl"></i>
                                </button>
                                <button
                                    @click="socialLogin('alipay')"
                                    class="social-btn alipay-btn w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700"
                                >
                                    <i class="fa fa-alipay text-xl"></i>
                                </button>
                                <button
                                    @click="socialLogin('weibo')"
                                    class="social-btn weibo-btn w-12 h-12 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600"
                                >
                                    <i class="fa fa-weibo text-xl"></i>
                                </button>
                            </div>
                        </div>

                        <div class="mt-6 text-center text-sm text-gray-400">
                            已有账号？ <a href="#" class="text-cyan-400 hover:text-cyan-300">立即登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
const showModal = ref(false)
const activeTab = ref('phone')

// 手机表单数据
const phoneForm = reactive({
    username: '',
    phone: '',
    password: '',
    verifyCode: '',
})

const phoneErrors = reactive({
    username: '',
    phone: '',
    password: '',
    verifyCode: '',
})

const phoneCodeSent = ref(false)
const phoneCountdown = ref(0)

// 邮箱表单数据
const emailForm = reactive({
    username: '',
    email: '',
    password: '',
    verifyCode: '',
})

const emailErrors = reactive({
    username: '',
    email: '',
    password: '',
    verifyCode: '',
})

const emailCodeSent = ref(false)
const emailCountdown = ref(0)

// 验证用户名
const validateUsername = (username) => {
    if (!username) return '用户名不能为空'
    if (username.length < 4) return '用户名至少4个字符'
    if (username.length > 16) return '用户名最多16个字符'
    return ''
}

// 验证手机号
const validatePhoneNumber = (phone) => {
    if (!phone) return '手机号不能为空'
    const regex = /^1[3-9]\d{9}$/
    if (!regex.test(phone)) return '请输入有效的手机号码'
    return ''
}

// 验证邮箱
const validateEmailAddress = (email) => {
    if (!email) return '邮箱不能为空'
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!regex.test(email)) return '请输入有效的邮箱地址'
    return ''
}

// 验证密码
const validatePassword = (password) => {
    if (!password) return '密码不能为空'
    if (password.length < 8) return '密码至少8个字符'
    return ''
}

// 验证验证码
const validateCode = (code) => {
    if (!code) return '验证码不能为空'
    if (code.length !== 6) return '验证码必须是6位数字'
    return ''
}

// 手机表单验证方法
const validatePhoneUsername = () => {
    phoneErrors.username = validateUsername(phoneForm.username)
}

const validatePhone = () => {
    phoneErrors.phone = validatePhoneNumber(phoneForm.phone)
}

const validatePhonePassword = () => {
    phoneErrors.password = validatePassword(phoneForm.password)
}

const validatePhoneCode = () => {
    phoneErrors.verifyCode = validateCode(phoneForm.verifyCode)
}

// 邮箱表单验证方法
const validateEmailUsername = () => {
    emailErrors.username = validateUsername(emailForm.username)
}

const validateEmail = () => {
    emailErrors.email = validateEmailAddress(emailForm.email)
}

const validateEmailPassword = () => {
    emailErrors.password = validatePassword(emailForm.password)
}

const validateEmailCode = () => {
    emailErrors.verifyCode = validateCode(emailForm.verifyCode)
}

// 发送手机验证码
const sendPhoneCode = () => {
    validatePhone()

    if (!phoneErrors.phone) {
        phoneCodeSent.value = true
        phoneCountdown.value = 60

        const timer = setInterval(() => {
            phoneCountdown.value--
            if (phoneCountdown.value <= 0) {
                clearInterval(timer)
            }
        }, 1000)

        // 模拟发送验证码
        console.log('发送验证码到手机:', phoneForm.phone)
    }
}

// 发送邮箱验证码
const sendEmailCode = () => {
    validateEmail()

    if (!emailErrors.email) {
        emailCodeSent.value = true
        emailCountdown.value = 60

        const timer = setInterval(() => {
            emailCountdown.value--
            if (emailCountdown.value <= 0) {
                clearInterval(timer)
            }
        }, 1000)

        // 模拟发送验证码
        console.log('发送验证码到邮箱:', emailForm.email)
    }
}

// 提交手机表单
const submitPhoneForm = () => {
    validatePhoneUsername()
    validatePhone()
    validatePhonePassword()
    validatePhoneCode()

    if (!phoneErrors.username && !phoneErrors.phone && !phoneErrors.password && !phoneErrors.verifyCode) {
        // 模拟表单提交
        console.log('手机注册表单提交:', phoneForm)
        alert('注册成功！即将跳转到测试页面')
        showModal.value = false
    }
}

// 提交邮箱表单
const submitEmailForm = () => {
    validateEmailUsername()
    validateEmail()
    validateEmailPassword()
    validateEmailCode()

    if (!emailErrors.username && !emailErrors.email && !emailErrors.password && !emailErrors.verifyCode) {
        // 模拟表单提交
        console.log('邮箱注册表单提交:', emailForm)
        alert('注册成功！即将跳转到测试页面')
        showModal.value = false
    }
}

// 第三方登录
const socialLogin = (platform) => {
    alert(`即将跳转到${platform === 'wechat' ? '微信' : platform === 'alipay' ? '支付宝' : '微博'}登录`)
}
// 组件卸载时清除定时器
onUnmounted(() => {})
// 组件挂载时刷新验证码
onMounted(() => {})
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #f0f2f5;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(79, 192, 210, 0.3);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeIn 0.3s ease-out;
}

.glow-text {
    text-shadow: 0 0 10px rgba(79, 192, 210, 0.7);
}

.input-glow:focus {
    box-shadow: 0 0 10px rgba(79, 192, 210, 0.5);
    border-color: #4fc0d2;
}

.btn-glow {
    box-shadow: 0 0 15px rgba(79, 192, 210, 0.7);
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(79, 192, 210, 0.9);
}

.tab-active {
    border-bottom: 3px solid #4fc0d2;
    color: #4fc0d2;
}

.social-btn {
    transition: all 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.wechat-btn:hover {
    background-color: #2ad15a;
}

.alipay-btn:hover {
    background-color: #1677ff;
}

.weibo-btn:hover {
    background-color: #e6162d;
}

.ennea-bg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><circle cx="100" cy="100" r="60" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><circle cx="100" cy="100" r="40" fill="none" stroke="%234fc0d2" stroke-width="0.5" stroke-dasharray="5,5"/><line x1="100" y1="20" x2="100" y2="180" stroke="%234fc0d2" stroke-width="0.5"/><line x1="20" y1="100" x2="180" y2="100" stroke="%234fc0d2" stroke-width="0.5"/><line x1="40" y1="40" x2="160" y2="160" stroke="%234fc0d2" stroke-width="0.5"/><line x1="160" y1="40" x2="40" y2="160" stroke="%234fc0d2" stroke-width="0.5"/></svg>');
    background-size: 200px 200px;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.countdown {
    color: #4fc0d2;
    font-weight: bold;
}
</style>
